<template>
    <!-- 账号信息 -->
    <div class="self-wrap">
        <div class="setting">
            <h3>个人信息</h3>
            <ul>
                <li>
                    <span>姓名</span>
                    <span>{{userName}}</span>
                </li>
                <li>
                    <span>{{ role == 'student' ? '学号' : (role == 'teacher' ? '教师号' : '管理员号') }}</span>
                    <span>{{ userId }}</span>
                </li>
                <li>
                    <span>性别</span>
                    <span>{{reqUserInfo.sex}}</span>
                </li>

                <li v-if="role !== 'admin'">
                    <span>{{role == 'student' ? '班级' : '所教班级' }}</span>
                    <span v-if="role == 'student'">{{reqUserInfo.className}}</span>
                    <div v-else>
                        <span
                            v-for="_class in teacherClassList"
                            :key="_class.classId"
                        >{{ _class.className }}&nbsp;&nbsp;</span>
                    </div>
                </li>
                <li v-if="role=='teacher'">
                    <span>所教课程</span>
                    <span>
                        <span
                            v-for="item in teacherCourseList"
                            :key="item.courseId"
                        >{{ item.courseName }}&nbsp;&nbsp;</span>
                    </span>
                </li>

                <li v-if="role !== 'admin'">
                    <span>专业</span>
                    <span>{{reqUserInfo.specialty}}</span>
                </li>
                <li>
                    <span>角色</span>
                    <span>{{roleLabel[role]}}</span>
                </li>
                <li>
                    <span>
                        <el-button type="primary" plain @click="updatePasswordVisible = true">修改密码</el-button>
                    </span>
                </li>
            </ul>
            <el-dialog title="修改密码" :visible.sync="updatePasswordVisible" width="30%">
                <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="原始密码" prop="oldPass">
                        <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="updatePasswordVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm(ruleForm)">确 定</el-button>
                    </el-form-item>
                </el-form>

                <!-- <UpdatePassword/> -->
            </el-dialog>
        </div>
    </div>
</template>

<script>
import UpdatePassword from "./update-password";
export default {
    components: { UpdatePassword },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (value.length < 6 || value.length > 32) {
                callback(new Error("密码长度必须在6-32位之间"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            teacherClassList: [], // 教师所教班级
            teacherCourseList: [], // 教师所教课程
            reqUserInfo: {
                // 需要请求的信息
                specialty: "",
                className: "",
                teacherClassList: [], // 教师所教班级
                sex: ""
            },
            updatePassowrdVisible: false,
            userId: sessionStorage.userId,
            userName: sessionStorage.userName,
            role: sessionStorage.role,
            updatePasswordVisible: false,
            ruleForm: {
                oldPass: "",
                pass: "",
                checkPass: ""
            },
            rules: {
                oldPass: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                pass: [{ validator: validatePass, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }]
            },
            roleLabel: {
                admin: "管理员",
                teacher: "教师",
                student: "学生"
            },
            userName: sessionStorage.userName
        };
    },
    created() {
        // 请求个人信息
        this.$http("/api/userInfo/query").then(res => {
            console.log("res.data", res.data);
            if (res.data.code === 0) {
                console.log("res", res);
                this.reqUserInfo = res.data.data[0];
                console.log("this.reqUserInfo", this.reqUserInfo);
            }
        });
        if (this.role === "teacher") {
            this.getTeacherClass();
            this.getTeacherCourse();
        }
    },
    methods: {
        getTeacherClass() {
            this.$http("/api/teacherClass/view", {
                params: {
                    where: {
                        teacherId: sessionStorage.userId
                    }
                }
            }).then(({ data }) => {
                this.teacherClassList = data.data;
            });
        },
        getTeacherCourse() {
            this.$http("/api/teacherCourse/view", {
                params: {
                    where: {
                        teacherId: sessionStorage.userId
                    }
                }
            }).then(({ data }) => {
                this.teacherCourseList = data.data;
            });
        },
        submitForm(data) {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    let { pass, oldPass } = data;
                    this.$http("/api/userInfo/updataPass", {
                        params: { pass, oldPass }
                    }).then(res => {
                        if (res.data.code === 0) {
                            this.updatePasswordVisible = false;
                        }
                        this.$message({
                            message: res.data.msg,
                            type: res.data.type
                        });
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
// .self-wrap {
//     background: #bbe6d6;
//     // overflow: hidden;
//     height: 100%;
// }
.setting {
    background: #fff;
    max-width: 700px;
    margin: 0 auto;
    margin-top: 100px;
    border: 2px dashed #ccc;
    box-shadow: 0 0 10px #ccc;
    padding: 15px 20px;
    h3 {
        text-align: center;
        padding: 5px;
    }
}
ul {
    > li {
        border-top: 1px dashed #ccc;
        display: flex;
        align-items: center;
        > span,
        > div {
            width: 50%;
            display: inline-block;
            padding: 5px;
            text-align: center;
        }
    }
}
</style>
